<template>
  <div class="add-container">
    <UserIndexTop :showfun="false" :topnav="nav"></UserIndexTop>
    <div class="round">
      <img src="" alt="">
    </div>
    <div class="add-main">
      <div class="add-main-center">
        <div class="add-con-top" @click="showcode = !showcode">
          <img src="@/assets/config_images/erweima.png" alt="">
        </div>
        <el-form :model="myform" label-width="80px" style="margin-top: 10px" >
          <el-form-item label="手机号">
            <el-input v-model="myform.user"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password"  v-model="myform.pwd"></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="myform.code" style="width: 160px;"></el-input>
            <p class="get-code" @click="getRegisterCode">获取验证码</p>
          </el-form-item>
        </el-form>
        <div class="get-pwd">
          <el-checkbox label="同意《智联同城用户注册协议》" name="type"></el-checkbox>
          <span>忘记密码</span>
        </div>
        <div class="add-user-btn" @click="addUser">
          <span>免费注册</span>
        </div>
        <p class="add-user-bot">
          <span>已有账号？</span>
          <router-link to="/login">直接登录</router-link>
        </p>
      </div>
    </div>
    <UserIndexBot></UserIndexBot>
  </div>
</template>

<script>
import UserIndexTop from '@/components/IndexCon/userindextop';
import UserIndexBot from '@/components/IndexCon/userindexbot';
import { register, getCode } from '@/api/user';
import { setTimeout } from 'timers';
// import { REGISTER } from '@utils/VerifyMessage';
export default {
  name: 'Register',
  components: {
    UserIndexTop, UserIndexBot
  },
  data() {
    return {
      nav: [],
      myform: {
        user: '',
        pwd: '',
        code: ''
      }
    }
  },
  methods: {
    // 获取验证码
    getRegisterCode() {
      // for (let item in this.myform) {
      //   if (this.myform.user === '') {
      //     alert(REGISTER.user)
      //   }
      // }
      getCode({
        mobile: this.myform.user
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    addUser() {
      const { user, pwd, code } = this.myform;
      register(user, pwd, code).then(res => {
        this.$message.success(res.msg);
        setTimeout(function() {
          this.$router.push({
            path: '/login'
          })
        }, 800)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$bg:linear-gradient(270deg,rgba(140,230,249,1) 0%,rgba(106,162,233,1) 100%);
$dark_gray:#889aa4;
$light_gray:#eee;
.add-container {
  width: 100%;
  height: 100%;
  min-width: 1024px;
  background: $bg;
  overflow: hidden;
  .round {
    position: relative;
    margin-top: 310px;
    float: left;
    background: url(/src/assets/config_images/Oval.png);
    background-size: cover;
  }
  .add-main {
    width: 33.5rem;
    height: 26.875rem;
    position: relative;
    margin: 0 auto;
    top: 40%; /*偏移*/
    transform: translateY(-50%);
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 6px 0px rgba(0,0,0,0.2);
    border-radius:3px;
    padding: 10px 88px;
    .add-main-center {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .add-con-top {
        width: 100%;
        height: 56px;
        img {
          float: right;
        }
      }
      .get-pwd {
        width: 100%;
        height: 30px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        cursor: pointer;
      }
      .add-user-btn {
        width: 80%;
        height:44px;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        margin: 10px auto;
        background:rgba(31,117,246,1);
        border-radius:2px;
        cursor: pointer;
      }
      .add-user-bot {
        width: 80%;
        height:30px;
        margin: 0 auto;
        line-height: 30px;
        text-align: center;
        color: #616161;
        a {
          color: #1F75F6;
        }
      }
      .get-code {
        width:80px;
        height:40px;
        border-radius:2px;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
        float: right;
        margin-top: -0px;
        background:rgba(31,117,246,1);
        cursor: pointer;
      }
    }
  }
}
</style>
